<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">

            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Color & Time Picker</h1>
        <section class="markdown">
            <p>按钮用于开始一个即时操作。加<code>disabled</code>属性可设置为禁用</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
                      <script src="dist/lib/bootstrap/bootstrap-timepicker/bootstrap-timepicker.js"></script>
                      <script src="dist/lib/bootstrap/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<div class="box box-info">
    <div class="box-header">
        <h3 class="box-title">Color & Time Picker</h3>
    </div>
    <div class="box-body">
        <!-- Color Picker -->
        <div class="form-group">
            <label>Color picker:</label>
            <input type="text" class="form-control my-colorpicker1">
        </div>
        <!-- /.form group -->
        <!-- Color Picker -->
        <div class="form-group">
            <label>Color picker with addon:</label>
            <div class="input-group my-colorpicker2">
                <input type="text" class="form-control">
                <div class="input-group-addon">
                    <i></i>
                </div>
            </div>
            <!-- /.input group -->
        </div>
        <!-- /.form group -->
        <!-- time Picker -->
        <div class="bootstrap-timepicker">
            <div class="form-group">
                <label>Time picker:</label>
                <div class="input-group">
                    <input type="text" class="form-control timepicker">
                    <div class="input-group-addon">
                        <i class="fa fa-clock-o"></i>
                    </div>
                </div>
                <!-- /.input group -->
            </div>
            <!-- /.form group -->
        </div>
    </div>
    <!-- /.box-body -->
</div>
<script type="text/javascript">
$('.my-colorpicker1').colorpicker()
//color picker with addon
$('.my-colorpicker2').colorpicker()

//Timepicker
$('.timepicker').timepicker({
    showInputs: false
})
</script>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                         <p>在要应用按钮样式的元素上添加<code>.btn</code>，再设置相应的颜色。</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;box box-info&quot;&gt;
    &lt;div class=&quot;box-header&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Color &amp; Time Picker&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;box-body&quot;&gt;
        &lt;!-- Color Picker --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;Color picker:&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;form-control my-colorpicker1&quot;&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- Color Picker --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;Color picker with addon:&lt;/label&gt;
            &lt;div class=&quot;input-group my-colorpicker2&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i&gt;&lt;/i&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- time Picker --&gt;
        &lt;div class=&quot;bootstrap-timepicker&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label&gt;Time picker:&lt;/label&gt;
                &lt;div class=&quot;input-group&quot;&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control timepicker&quot;&gt;
                    &lt;div class=&quot;input-group-addon&quot;&gt;
                        &lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- /.input group --&gt;
            &lt;/div&gt;
            &lt;!-- /.form group --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /.box-body --&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(&#x27;.my-colorpicker1&#x27;).colorpicker()
//color picker with addon
$(&#x27;.my-colorpicker2&#x27;).colorpicker()

//Timepicker
$(&#x27;.timepicker&#x27;).timepicker({
    showInputs: false
})
&lt;/script&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
</article>